<template>
  <div class="header">
    <div class="container" :class="{ 'log-in': isActive, 'active': Active }">
      <div class="box"></div>
      <div class="container-forms">
        <div class="container-info">
          <div class="info-item">
            <div class="table">
              <div class="table-cell">
                <p>已经有账号了？ </p>
                <div class="btn" @click="showLogin">登录</div>
              </div>
            </div>
          </div>
          <div class="info-item">
            <div class="table">
              <div class="table-cell">
                <p>还没有账号？ </p>
                <div class="btn" @click="showSignUp">注册</div>
              </div>
            </div>
          </div>
        </div>
        <div class="container-form">
          <div class="form-item log-in">
            <div class="table">
              <div class="table-cell">
                <input name="Username" placeholder="用户名" type="text" v-model="data.username" />
                <input name="Password" placeholder="密码" type="Password" v-model="data.password" />
                <div class="btn" @click="LoginBt"><el-button plain>登录</el-button></div>

              </div>
            </div>
          </div>
          <div class="form-item sign-up">
            <div class="table">
              <div class="table-cell">
                <input name="phone" placeholder="电话号码" type="text" v-model="data.phone" />
                <input name="Username" placeholder="用户名" type="text" v-model="data.username" />
                <input name="Password" placeholder="密码" type="Password" v-model="data.password" />
                <input name="againPassword" placeholder="再次输入密码" type="Password" v-model="data.againPassword" />
                <div class="btn" @click="SignUpBt"><el-button plain>注册</el-button></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div></div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { Login, Register } from '../api/user';
import { ElMessage } from 'element-plus'
// import { GiveFormData } from '../api/menu.js';
import { GiveFormData } from '../api/user.js';
import { useRouter } from 'vue-router';

const router = useRouter()
const isActive = ref(false);
const Active = ref(false)
const data = reactive({
  phone: '',
  username: '',
  password: '',
  againPassword: '',
  message: '',
  typeof: ''
})


// 登录
const LoginBt = () => {
  Login({
    username: data.username,
    password: data.password
  }).then(res => {
    window.localStorage.setItem('jwtToken', res.token)
    window.localStorage.setItem('user_id',res.data)
    if (res.msgType === '8000' && res.token) {
      Active.value = true;   //存在后台返回token，登录成功
      data.typeof = 'success'
      setTimeout(() => {
        router.push('/')
      }, 1500)
    } else if (res.msgType === '8002') {
      data.typeof = 'warning'
    } else {
      return
    }
    data.message = res.msg
    ElMessage({  //Element Plus 提示框
      showClose: true,
      message: data.message,
      center: true,
      type: data.typeof,
    })
  })

}



// 注册
const SignUpBt = () => {
  Register({
    username: data.username,
    password: data.password,
    phone: data.phone,
    againPassword: data.againPassword
  }).then(res => {
    if (res.msgType == 8000) {
      data.message = res.msg
      data.typeof = 'success'
    } else {
      data.message = res.msg
      data.typeof = 'warning'
    }
    ElMessage({  //Element Plus 提示框
      showClose: true,
      message: data.message,
      center: true,
      type: data.typeof,
    })
    console.log(res);
  })

  setTimeout(() => {
    Active.value = false
    isActive.value = false;
  }, 1000)
}

// 展示登录页面
const showLogin = () => {
  isActive.value = false;
};
// 展示注册页面
const showSignUp = () => {
  isActive.value = true;
};
</script>


<style>
body {
  overflow: hidden;
  height: 100%;
}
</style>

<style lang="less" scoped>
.header{
  overflow: hidden;
  height: 100%;
  background-color: #5356ad;
}
.el-button,
.is-plain {
  background-color: #ff73b3;
  border: none;
  color: white;
}

.table {
  display: table;
  width: 100%;
  height: 100%
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  -webkit-transition: all .5s;
  transition: all .5s
}

.container {
  position: relative;
  width: 600px;
  margin: 30px auto 0;
  // height: 320px;
  background-color: #999ede;
  top: 50%;
  margin-top: -130px;
  -moz-transition: all .3s;
  -o-transition: all .5s;
  -webkit-transition: all .5s;
  transition: all .3s
}

.container .box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden
}

.container .box:before,
.container .box:after {
  content: " ";
  position: absolute;
  left: 152px;
  top: 50px;
  background-color: #9297e0;
  transform: rotateX(52deg) rotateY(15deg) rotateZ(-38deg);
  width: 300px;
  height: 285px;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  -webkit-transition: all .5s;
  transition: all .5s
}

.container .box:after {
  background-color: #a5aae4;
  top: -10px;
  left: 80px;
  width: 320px;
  height: 180px
}

.container .container-forms {
  
  position: relative
}

.container .btn {
  cursor: pointer;
  text-align: center;
  margin: 0 auto;
  width: 60px;
  color: #fff;
  background-color: #ff73b3;
  opacity: 1;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  -webkit-transition: all .5s;
  transition: all .5s
}

.container .btn:hover {
  opacity: .7
}

.container .btn,
.container input {
  padding: 10px 15px
}

.container input {
  margin: 0 auto 15px;
  display: block;
  width: 220px;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  -webkit-transition: all .3s;
  transition: all .3s
}

.container .container-forms .container-info {
  text-align: left;
  font-size: 0
}

.container .container-forms .container-info .info-item {
  text-align: center;
  font-size: 16px;
  width: 300px;
  height: 320px;
  display: inline-block;
  vertical-align: top;
  color: #fff;
  opacity: 1;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  -webkit-transition: all .3s;
  transition: all .3s
}

.container .container-forms .container-info .info-item p {
  font-size: 20px;
  margin: 20px
}

.container .container-forms .container-info .info-item .btn {
  background-color: transparent;
  border: 1px solid #fff
}

.container .container-forms .container-info .info-item .table-cell {
  padding-right: 35px
}

.container .container-forms .container-info .info-item:nth-child(2) .table-cell {
  padding-left: 35px;
  padding-right: 0
}

.container .container-form {
  overflow: hidden;
  position: absolute;
  left: 30px;
  top: -30px;
  width: 305px;
  height: 380px;
  background-color: #fff;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
  -moz-transition: all .5s;
  -o-transition: all .5s;
  -webkit-transition: all .5s;
  transition: all .5s
}

.container .container-form:before {
  content: "✔";
  position: absolute;
  left: 160px;
  top: -50px;
  color: #5356ad;
  font-size: 130px;
  opacity: 0;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  -webkit-transition: all .5s;
  transition: all .5s
}

.container .container-form .btn {
  position: relative;
  box-shadow: 0 0 10px 1px #ff73b3;
  margin-top: 30px
}

.container .form-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  -webkit-transition: all .5s;
  transition: all .5s
}

.container .form-item.sign-up {
  position: absolute;
  left: -100%;
  opacity: 0
}

.container.log-in .box:before {
  position: absolute;
  left: 180px;
  top: 62px;
  height: 265px
}

.container.log-in .box:after {
  top: 22px;
  left: 192px;
  width: 324px;
  height: 220px
}

.container.log-in .container-form {
  left: 265px
}

.container.log-in .container-form .form-item.sign-up {
  left: 0;
  opacity: 1
}

.container.log-in .container-form .form-item.log-in {
  left: -100%;
  opacity: 0
}

.container.active {
  width: 260px;
  height: 140px;
  margin-top: -70px
}

.container.active .container-form {
  left: 30px;
  width: 200px;
  height: 200px
}

.container.active .container-form:before {
  content: "✔";
  position: absolute;
  left: 51px;
  top: 5px;
  color: #5356ad;
  font-size: 130px;
  opacity: 1
}

.container.active input,
.container.active .btn,
.container.active .info-item {
  display: none;
  opacity: 0;
  padding: 0;
  margin: 0 auto;
  height: 0
}

.container.active .form-item {
  height: 100%
}

.container.active .container-forms .container-info .info-item {
  height: 0;
  opacity: 0
}

.rabbit {
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 3;
  fill: #fff
}
</style>